feat: Better parsing of external HTML attributes & inline styles #1605

matthewlipski · 2025-04-11T18:49:18Z

This PR adds tests for parsing various HTML attributes & inline styles, and provides fixes so that these tests pass. Namely, these tests include:

Parsing numbered list start props from start attribute.
Parsing image width props from width attribute.
Parsing bold, italic, underline, and strike marks from various tags & inline styles. This includes e.g. b tags and font-weight inline styles for bold marks as well as i tags and font-style inline styles for italic marks.
Parsing textColor and backgroundColor marks from inline styles.
Parsing textColor and backgroundColor props from inline styles.
Parsing textAlignment props from inline styles.

To ensure all tests pass, several changes have also been made to the code:

Parse rules have been added to textColor, backgroundColor, and textAlignment` props for inline styles.
The textColor and backgroundColor props have been changed, so that they're now applied as attributes to blockContent nodes instead of blockContainer nodes. This is because we would only attempt to parse these props when a blockContainer node is found, i.e. when a div with [data-node-type="blockContainer"] is found. So we would never even attempt to parse these props from external HTML. The CSS has been updated also to account for this change. Also, all other block props are already stored on the blockContent node, so this makes the textColor and backgroundColor props also consistent with that.
Small fixes have been made to numbered list item and quote blocks.

Additionally, code for color props & marks has been cleaned up slightly.

The large negative diff in this PR is also because a bunch of redundant React unit test snapshots have been removed.

vercel · 2025-04-11T18:49:23Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
blocknote	✅ Ready (Inspect)	Visit Preview	Apr 23, 2025 8:10pm
blocknote-website	✅ Ready (Inspect)	Visit Preview	Apr 23, 2025 8:10pm

pkg-pr-new · 2025-04-11T23:18:04Z

Open in StackBlitz

@blocknote/ariakit

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/ariakit@1605

@blocknote/code-block

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/code-block@1605

@blocknote/core

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/core@1605

@blocknote/react

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/react@1605

@blocknote/mantine

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/mantine@1605

@blocknote/server-util

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/server-util@1605

@blocknote/shadcn

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/shadcn@1605

@blocknote/xl-docx-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-docx-exporter@1605

@blocknote/xl-multi-column

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-multi-column@1605

@blocknote/xl-odt-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-odt-exporter@1605

@blocknote/xl-pdf-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-pdf-exporter@1605

commit: ab09848

nperez0111

👍 this looks exactly as I'd have expected it to.

Great work @matthewlipski

…d text color mark

YousefED · 2025-04-23T08:54:27Z

packages/core/src/extensions/BackgroundColor/BackgroundColorMark.ts

-          "data-background-color": attributes.stringValue,
-        }),
-      },
+      stringValue: getBackgroundColorAttribute("stringValue"),


this loses default: undefined, not sure if intended

It doesn't really make a difference, there's not really a use case where you would set a color mark with a default value. Selecting a default text/bg color in the color picker removes the mark instead, and this is how it should always be done, so the default value for the mark should never be used.

YousefED · 2025-04-23T08:55:56Z

packages/core/src/extensions/TextColor/TextColorMark.ts

-          if (element.hasAttribute("data-text-color")) {
-            return { stringValue: element.getAttribute("data-text-color") };
+          if (element.hasAttribute("data-text-color") || element.style.color) {
+            return {};


Yeah we don't need to parse the color because it's already handled in the parseHTML function of the stringValue attribute.

can't we omit line 25 / 26 then entirely? it's still a bit confusing right? (maybe tiptap issue)

packages/server-util/src/context/__snapshots__/ServerBlockNoteEditor.test.ts.snap

YousefED

Looks good!

Just realized one caveat; for yjs stored documents the block color data will probably be lost when upgrading (or the document might break entirely, but I doubt that).

Perhaps you can see with Nick if there's a fix for that possible (or a migration path for people upgrading)

YousefED · 2025-04-23T09:51:03Z

...ages/xl-multi-column/src/test/conversions/__snapshots__/multi-column/undefined/external.html

any idea why this snapshot is a lot smaller while the other ones got larger?

YousefED · 2025-04-24T17:22:14Z

packages/core/src/editor/Block.css

  background-color: #f4dfeb;
 }

 /* TEXT ALIGNMENT */
 [data-text-alignment="left"] {
-  justify-content: flex-start !important;


do you know why this was here / why has it been removed?

YousefED · 2025-04-24T17:27:03Z

packages/core/src/extensions/BackgroundColor/BackgroundColorExtension.ts


 export const BackgroundColorExtension = Extension.create({
  name: "blockBackgroundColor",

  addGlobalAttributes() {
    return [
      {
-        types: ["blockContainer", "tableCell", "tableHeader"],


I suppose not, but does this break anything for colors / alignment on custom blocks (as you're changing this from blockcontainer to explicitly naming the block types)

YousefED · 2025-04-24T17:29:09Z

packages/core/src/extensions/TextColor/TextColorExtension.ts


 export const TextColorExtension = Extension.create({
  name: "blockTextColor",

  addGlobalAttributes() {
    return [
      {
-        types: ["blockContainer", "tableCell", "tableHeader"],
+        types: [


same question as above; does this break anything for custom blocks?

YousefED · 2025-04-24T17:30:52Z

packages/core/src/extensions/TextColor/TextColorMark.ts

-          if (element.hasAttribute("data-text-color")) {
-            return { stringValue: element.getAttribute("data-text-color") };
+          if (element.hasAttribute("data-text-color") || element.style.color) {
+            return {};


can't we omit line 25 / 26 then entirely? it's still a bit confusing right? (maybe tiptap issue)

vercel bot had a problem deploying to Preview – blocknote-website April 11, 2025 19:24 Failure

vercel bot deployed to Preview – blocknote April 11, 2025 19:45 View deployment

vercel bot deployed to Preview – blocknote-website April 11, 2025 23:23 View deployment

vercel bot deployed to Preview – blocknote April 11, 2025 23:34 View deployment

vercel bot deployed to Preview – blocknote April 12, 2025 00:01 View deployment

vercel bot deployed to Preview – blocknote-website April 12, 2025 00:08 View deployment

matthewlipski mentioned this pull request Apr 12, 2025

feat: Unit testing setup restructure #1595

Merged

9 tasks

matthewlipski marked this pull request as ready for review April 12, 2025 00:33

nperez0111 approved these changes Apr 14, 2025

View reviewed changes

Base automatically changed from unit-tests-setup to main April 17, 2025 08:20

matthewlipski and others added 2 commits April 17, 2025 10:25

Fixed parsing of numbered list start index, background color mark, an…

8cad7bd

…d text color mark

Fixes

1b23c70

nperez0111 force-pushed the lossy-html-fixes branch from e613254 to 1b23c70 Compare April 17, 2025 08:26

vercel bot had a problem deploying to Preview – blocknote-website April 17, 2025 08:53 Failure

vercel bot had a problem deploying to Preview – blocknote April 17, 2025 08:56 Failure

YousefED reviewed Apr 23, 2025

View reviewed changes

Reverted lost fixes

13acc7e

vercel bot had a problem deploying to Preview – blocknote April 23, 2025 09:34 Failure

vercel bot had a problem deploying to Preview – blocknote-website April 23, 2025 09:36 Failure

WIP

c8bc46f

vercel bot had a problem deploying to Preview – blocknote April 23, 2025 17:59 Failure

vercel bot had a problem deploying to Preview – blocknote-website April 23, 2025 18:01 Failure

WIP

8af8476

vercel bot had a problem deploying to Preview – blocknote-website April 23, 2025 18:03 Failure

vercel bot had a problem deploying to Preview – blocknote April 23, 2025 18:05 Failure

WIP

86214e5

vercel bot had a problem deploying to Preview – blocknote April 23, 2025 18:09 Failure

vercel bot had a problem deploying to Preview – blocknote-website April 23, 2025 18:11 Failure

Moved color props to block content from block container

b47de6a

vercel bot had a problem deploying to Preview – blocknote April 23, 2025 18:21 Failure

vercel bot had a problem deploying to Preview – blocknote-website April 23, 2025 18:23 Failure

matthewlipski added 3 commits April 23, 2025 20:49

Removed unneeded attributes from BlocAttributes

a6389c7

Reverted serializeBlocksExternalHTML.ts

0ced7f2

Reverted server-util package.json

ced52b4

matthewlipski changed the title ~~feat: Less data loss in external HTML~~ feat: Better parsing of HTML attributes & inline styles Apr 23, 2025

vercel bot had a problem deploying to Preview – blocknote-website April 23, 2025 18:53 Failure

matthewlipski added 2 commits April 23, 2025 20:58

Small fix

2bbdd6c

Updated tests in other packages

1b999ca

vercel bot deployed to Preview – blocknote April 23, 2025 19:20 View deployment

vercel bot deployed to Preview – blocknote-website April 23, 2025 19:30 View deployment

Updated PW snapshots

ab09848

vercel bot deployed to Preview – blocknote April 23, 2025 20:02 View deployment

vercel bot deployed to Preview – blocknote-website April 23, 2025 20:10 View deployment

matthewlipski changed the title ~~feat: Better parsing of HTML attributes & inline styles~~ feat: Better parsing of external HTML attributes & inline styles Apr 24, 2025

matthewlipski mentioned this pull request Apr 24, 2025

feat: Inline style props in external HTML #1636

Open

YousefED reviewed Apr 24, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Better parsing of external HTML attributes & inline styles #1605

feat: Better parsing of external HTML attributes & inline styles #1605

matthewlipski commented Apr 11, 2025 •

edited

Loading

vercel bot commented Apr 11, 2025 •

edited

Loading

pkg-pr-new bot commented Apr 11, 2025 •

edited

Loading

nperez0111 left a comment

YousefED Apr 23, 2025

matthewlipski Apr 23, 2025

YousefED Apr 23, 2025

matthewlipski Apr 23, 2025

YousefED Apr 24, 2025

YousefED left a comment

YousefED Apr 23, 2025

YousefED Apr 24, 2025

YousefED Apr 24, 2025

YousefED Apr 24, 2025

YousefED Apr 24, 2025

feat: Better parsing of external HTML attributes & inline styles #1605

Are you sure you want to change the base?

feat: Better parsing of external HTML attributes & inline styles #1605

Conversation

matthewlipski commented Apr 11, 2025 • edited Loading

vercel bot commented Apr 11, 2025 • edited Loading

pkg-pr-new bot commented Apr 11, 2025 • edited Loading

nperez0111 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

YousefED left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

matthewlipski commented Apr 11, 2025 •

edited

Loading

vercel bot commented Apr 11, 2025 •

edited

Loading

pkg-pr-new bot commented Apr 11, 2025 •

edited

Loading